{% extends 'base.html' %}
{% block title %}Home{% endblock %}
{% block content %}
<main class="container mx-auto px-4 py-8">
    <div class="text-center">
        <p class="text-xl p-6">This is a minimalistic personal website built with Flask and Tailwind CSS with {{article_count}} post.</p>
    </div>

    <!-- Form for adding new articles -->
    <!-- <form action="/add_article" method="POST" class="mb-8"> -->
        <!-- <input type="text" name="title" placeholder="Article Title" required class="block mb-2 p-2 w-full border border-gray-300 rounded-lg"> -->
        <!-- <textarea name="content" placeholder="Article Content" required class="block mb-2 p-2 w-full border border-gray-300 rounded-lg"></textarea> -->
        <!-- <button type="submit" class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-lg">Submit</button> -->
    <!-- </form> -->
<!-- ... -->


    <div class="container mx-auto px-4 py-8">
            <div class="mb-4">
                <p>HP</p>
                <div class="w-full bg-gray-200 rounded-full">
                    <div class="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full" style="width: {{ progress_percentage }}%;">{{ current_value }} / 18262</div>
                </div>
            </div>
        {% for item in progress_data %}
            <div class="mb-4">
                <p>{{ item.name }}</p>
                <div class="w-full bg-gray-200 rounded-full">
                    <div class="bg-blue-600 text-xs font-medium text-blue-100 text-center p-0.5 leading-none rounded-full" style="width: {{ (item.completed / item.target) * 100 }}%;">{{ item.completed }}/{{ item.target }}</div>
                </div>
            </div>
        {% endfor %}
    </div>
<div class="container mx-auto px-4 py-8">
    <!-- ... -->
    {% if search_results %}
        <div class="mt-4">
            <h2 class="text-lg font-bold">Search Results:</h2>
            <ul class="list-disc list-inside">
                {% for item in search_results %}
                    <li>{{ item|safe }}</li>
                {% endfor %}
            </ul>
        </div>
    {% endif %}
</div>
<!-- ... -->
   
    <!-- Article Start -->
    <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
        {% for article in articles|sort(attribute='updated_at', reverse=True) %}
        <div class="border-solid border-2 border-black dark:border-white p-6 rounded-lg shadow-md hover:shadow-xl hover:scale-105 transition-all duration-300 ease-in-out">
            <h2 class="text-lg font-semibold mb-2">
                <a href="{{ url_for('main.article_detail', article_id=article.id) }}" class="text-black dark:text-white hover:text-red-500">{{ article.title }}</a>
            </h2>
            <div class="flex items-center text-gray-500 dark:text-slate-400 mb-2 space-x-4">
                <time datetime="{{ article.updated_at }}" title="Updated At" class="flex items-center">
                    <i class="fas fa-calendar-alt mr-1"></i> {{ article.updated_at.strftime('%y-%m-%d %H:%M')}}
                </time>
                <!-- Add category -->
                <div class="flex items-center">
                    <i class="fas fa-folder mr-1"></i> {{ article.category }}
                </div>
                <!-- Add view count -->
                <div class="flex items-center">
                    <i class="fas fa-eye mr-1"></i> {{ article.view_count }}
                </div>
            </div>
            <p class="text-lg mb-2 line-clamp-4">{{ article.content}}</p>
            <a href="{{ url_for('main.article_detail', article_id=article.id) }}" class="bg-red-500 text-black px-4 py-2 rounded mt-4 inline-block hover:bg-red-700 ">Read More</a>
        </div>
        {% endfor %}


    </div>

    <!-- Article End -->
</main>

{% endblock %}